<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
      <el-form-item label="技能名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入技能名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="报名时间" prop="date2">
        <el-date-picker
          v-model="date2"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          style="width: 100%"/>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
          <el-option label="发布" value="0" />
          <el-option label="下架" value="1" />
        </el-select>
      </el-form-item>

      <el-form-item label="客户端" prop="wxClientId" v-has-role="['admin']">
        <el-select v-model="queryParams.wxClientId" placeholder="请选择客户端" clearable size="small">
          <el-option
            v-for="item in clientList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['hps:site:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['hps:site:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['hps:site:remove']"
        >删除</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="siteList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="技能名称" align="center" prop="name" />
      <el-table-column label="报名时间" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.bmsj}} - {{scope.row.jzsj}}</span>
        </template>
      </el-table-column>
      <el-table-column label="培训时间" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.kssj}} - {{scope.row.jssj}}</span>
        </template>
      </el-table-column>
      <el-table-column label="退款时间" align="center" prop="refundTime" />
      <el-table-column label="报名人数" align="center" prop="signNum" />
      <el-table-column label="报名费" align="center" prop="price" />
      <el-table-column label="考试费" align="center" prop="examCost" />

      <el-table-column label="所属项目" align="center" prop="labelName" >
      </el-table-column>
      <el-table-column label="客户端" align="center" prop="wxClientName" v-if="handleCheckRole('admin')"  />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['hps:site:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['hps:site:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改环鄱赛-站点对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form-item label="技能名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入技能名称" />
            </el-form-item>
            <el-form-item label="培训费" prop="price">
              <el-input v-model="form.price" placeholder="请输入报名费" />
            </el-form-item>
            <el-form-item label="考试费" prop="examCost">
              <el-input v-model="form.examCost" placeholder="请输入考试费" />
            </el-form-item>
            <el-form-item label="报名人数" prop="signNum">
              <el-input v-model="form.signNum" placeholder="请输入报名人数" />
            </el-form-item>
            <el-form-item label="报名时间" prop="date">
              <el-date-picker
                v-model="form.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                style="width: 100%"/>
            </el-form-item>

            <el-form-item label="培训时间" prop="date1">
              <el-date-picker
                v-model="form.date1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                style="width: 100%"/>
            </el-form-item>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="所属机构" prop="hpsDeptList" v-has-role="['admin']">
                  <el-select v-model="form.deptId" placeholder="请选择机构" clearable size="small">
                    <el-option
                        v-for="item in hpsDeptList"
                        :key="item.deptId"
                        :label="item.deptName"
                        :value="item.deptId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属项目" prop="hpsLabelId" v-has-role="['admin']">
                  <el-select v-model="form.hpsLabelId" placeholder="请选择项目" clearable size="small">
                    <el-option
                        v-for="item in labelList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="退款时间" prop="refundTime">
              <el-date-picker
                v-model="form.refundTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option label="发布" value="1"></el-option>
                <el-option label="下架" value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="封面图" prop="logo">
              <ImageUpload v-model="form.logo" />
            </el-form-item>

          </el-tab-pane>
          <el-tab-pane label="报名详情" name="second">
              <vue-ueditor-wrap v-model="form.content" :config="myConfig" ></vue-ueditor-wrap>
          </el-tab-pane>
        </el-tabs>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="submitLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSite, getSite, delSite, addSite, updateSite, exportSite } from "@/api/hps/site";
import { listDept } from "@/api/system/dept";
import { listLabel } from "@/api/hps/label";
import { listClient } from "@/api/wx/client";
import { checkPermi,checkRole } from "@/utils/permission.js";
import ImageUpload from '@/components/ImageUpload';
import VueUeditorWrap from "vue-ueditor-wrap";
import {listSkill,getSkill,addSkill,updateSkill,delSkill} from "@/api/hps/skill";
export default {
  name: "skillLevel",
  components: {
    VueUeditorWrap,
    ImageUpload
  },
  data() {
    let checkBmsj = function (rule, value, callback) {
      console.log(value)
      if (value) {
        callback();
      } else {
        callback(new Error('请选择时间'));
      }
    };
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //报名时间
      date:[],
      //培训时间
      date1:[],
      //报名时间段查询
      date2:[],
      // 总条数
      total: 0,
      //机构列表
      hpsDeptList:[],
      //项目列表
      labelList:[],
      // 环鄱赛-站点表格数据
      siteList: [],
      clientList: [],
      activeName: 'first',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 340,
        // 初始容器宽度
        initialFrameWidth: '100%',
        //启用自动保存
        enableAutoSave: true,
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！部署在国外的服务器，如果无法访问，请自备梯子）
        serverUrl: process.env.VUE_APP_BASE_API + '/api/ueditor/controller?userId='+this.$store.getters.userInfo.userId,
        // serverUrl:'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/ueditor/',
        zIndex: 3001
      },
      //提交form表单确认按钮加载效果
      submitLoading:false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        bmsj:undefined,
        jzsj:undefined,
        dataType:'1'
      },
      //查询环鄱赛下的所有机构列表
      queryParams1: {
        parentId:'110'
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "不能为空", trigger: "blur" }
        ],
        price:[
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        expressFee:[
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        signNum:[
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        photoCost:[
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        date:[
          { required: true,validator:checkBmsj, trigger: 'blur' }
        ],
        date1:[
          { required: true,validator:checkBmsj, trigger: 'blur' }
        ],
        examCost:[
          { required: true,validator:checkBmsj, trigger: 'blur' }
        ],
        refundTime:[
          { required: true,validator:checkBmsj, trigger: 'blur' }
        ],
        hpsLabelId:[
          { required: true,validator:checkBmsj, trigger: 'blur' }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getLabelList();
    this.getDeptList();
    this.getDicts("system_common_status").then(response => {
      this.statusOptions = response.data;
    });
    if (checkRole(['admin'])){
      listClient().then(response => {
        this.clientList = response.rows;
      });
    }
  },
  methods: {
    /** 查询环鄱赛-站点列表 */
    getList() {
      this.loading = true;
      listSkill(this.queryParams).then(response => {
        console.log(response)
        this.siteList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询项目名称列表 */
    getLabelList(){
      listLabel(this.queryParams).then(response => {
        this.labelList = response.rows;
      });
    },
    /** 查询机构列表 */
    getDeptList(){
      listDept(this.queryParams1).then(response => {
        this.hpsDeptList=response.data
        console.log(this.hpsDeptList)
      });
    },
    handleCheckRole(v){
      return checkRole([v]);
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        content: undefined,
        logo: undefined,
        url: undefined,
        price:undefined,
        wxClientId: undefined,
        expressFee:undefined,
        photoCost:undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      //获取日期时间段
      this.queryParams.bmsj=this.date2[0]
      this.queryParams.jzsj=this.date2[1]
      console.log(this.date2)
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      //清空时间段缓存
      this.date=[];
      this.submitLoading=false;
      this.open = true;
      this.title = "添加职业技能等级";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSkill(id).then(response => {
        this.form = response.data;
        //回显报名时间
        this.date=[],this.date1 = [];
        if(response.data.bmsj!=null && response.data.bmsj!=undefined && response.data.bmsj!=''){
          this.date.push(response.data.bmsj);
          this.date.push(response.data.jzsj);
        }
        if(response.data.kssj!=null && response.data.kssj!=undefined && response.data.kssj!=''){
          this.date1.push(response.data.kssj);
          this.date1.push(response.data.jssj);
        }
        this.$set(this.form,'date',this.date);
        this.$set(this.form,'date1',this.date1);
        this.form.date=this.date;
        this.form.date1=this.date1;
        this.submitLoading=false;
        this.open = true;
        this.title = "修改职业技能等级";
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            //获取报名时间段时间
            this.form.bmsj=this.form.date[0];
            this.form.jzsj=this.form.date[1];
            this.form.kssj = this.form.date1[0];
            this.form.jssj = this.form.date1[1];
            updateSkill(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            //获取报名时间段时间
            this.form.bmsj=this.form.date[0];
            this.form.jzsj=this.form.date[1];
            //获取培训时间段
            this.form.kssj=this.form.date1[0];
            this.form.jssj=this.form.date1[1];
            this.form.dataType='1';
            console.log(this.form)
            addSkill(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除环鄱赛-站点编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delSkill(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有环鄱赛-站点数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportSite(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function() {});
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  }
};
</script>
